.circular-progress-bar {
  height: 32px;
  width: 32px;
  position: relative;

  &.s {
    height: 16px;
    width: 16px;
  }

  &.m {
    height: 24px;
    width: 24px;
  }

  &.xl {
    height: 48px;
    width: 48px;
  }

  &.xxl {
    height: 64px;
    width: 64px;
  }
}

.circular-progress-bar .inner {
  position: absolute;
  z-index: 6;
  top: 50%;
  left: 50%;
  height: 24px;
  width: 24px;
  margin: -12px 0 0 -12px;
  background-color: $white;
  border-radius: 100%;

  &.s {
    height: 12px;
    width: 12px;
    margin: -6px 0 0 -6px;
  }

  &.m {
    height: 18px;
    width: 18px;
    margin: -9px 0 0 -9px;
  }

  &.xl {
    height: 40px;
    width: 40px;
    margin: -20px 0 0 -20px;
  }

  &.xxl {
    height: 52px;
    width: 52px;
    margin: -26px 0 0 -26px;
  }
}

.circular-progress-bar .numb {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  font-size: 15px;
  color: $gray-700;

  &.m {
    font-size: 11px;
  }

  &.xl {
    font-size: 20px;
  }

  &.xxl {
    font-size: 24px;
  }

  &.cancellable {
    &:hover {
      .percent {
        display: none;
      }

      .cancel-icon {
        display: block;
      }
    }
  }

  .cancel-icon {
    display: none;
  }
}

.circular-progress-bar .bar {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: $gray-100;
  -webkit-border-radius: 100%;
  clip: rect(0px, 32px, 32px, 16px);

  &.s {
    clip: rect(0px, 16px, 16px, 8px);
  }

  &.m {
    clip: rect(0px, 24px, 24px, 12px);
  }

  &.xl {
    clip: rect(0px, 48px, 48px, 24px);
  }

  &.xxl {
    clip: rect(0px, 64px, 64px, 32px);
  }
}

.circle .bar .progress {
  position: absolute;
  height: 100%;
  width: 100%;
  -webkit-border-radius: 100%;
  clip: rect(0px, 16px, 32px, 0px);
  background-color: $primary;

  &.s {
    clip: rect(0px, 8px, 16px, 0px);
  }

  &.m {
    clip: rect(0px, 12px, 24px, 0px);
  }

  &.xl {
    clip: rect(0px, 24px, 48px, 0px);
  }

  &.xxl {
    clip: rect(0px, 32px, 64px, 0px);
  }
}

.circle .right .progress {
  z-index: 1;
  animation: left 1s linear both;
}
.circle .left {
  z-index: 3;
  transform: rotate(180deg);
}

.circle .left .progress {
  animation: right 1s linear both;
  animation-delay: 1s;
}
